import React, {useEffect} from "react";
import {Button, Form, Input} from "antd";
import {LockOutlined, UserOutlined} from "@ant-design/icons";
import {connect} from "umi";

const Login = (props) => {

  const {login: {captcha}, dispatch} = props

  useEffect(() => {
    dispatch({
      type: 'login/getCaptcha',
    })
  }, [])

  const onFinish = (values) => {
    dispatch({
      type: 'login/login',
      payload: {
        userName: values.username,
        password: values.password,
        captcha: values.captcha,
        codeKey: captcha.codeKey,
      }
    })
    dispatch({
      type: 'login/getCaptcha',
    })
  }

  const getCaptcha = () => {
    dispatch({
      type: 'login/getCaptcha',
    })
  }

  return (
    <div className="building">
      <div className="login">
        <Form className="form"
              labelCol={{span: 3}}
              onFinish={onFinish}
        >
          <h1 className="title1">白兰培训信息管理系统</h1>
          <Form.Item style={{position: "absolute", top: "28%",left: "50%", transform: "translate(-50%, -50%)"}} name="username" rules={[{ required: true, message: '请输入用户名!' }]}>
            <Input placeholder="用户名" style={{width: "300px"}} prefix={<UserOutlined />} className="text"/>
          </Form.Item>
          <Form.Item style={{position: "absolute", top: "45%",left: "50%", transform: "translate(-50%, -50%)"}} name="password" rules={[{ required: true, message: '请输入密码!' }]}>
            <Input.Password placeholder="密码" style={{width: "300px"}} prefix={<LockOutlined />} className="text"/>
          </Form.Item>
          <Form.Item style={{position: "absolute", top: "62%",left: "50%", transform: "translate(-50%, -50%)"}} name="captcha" rules={[{ required: true, message: '请输入验证码!' }]}>
            <div className="captcha">
              <Input placeholder="验证码" style={{ fontSize: "20px", width: "150px", position: "absolute", top: "50%", left: "0%", transform: "translate(-50%, -50%)"}}/>
              <img src={captcha.codeValue} onClick={getCaptcha}/>
            </div>
          </Form.Item>
          <Form.Item style={{position: "absolute", top: "80%",left: "50%", transform: "translate(-50%, -50%)"}}>
            <Button htmlType="submit" type="primary" style={{fontSize: "20px", height: "50px",position: "absolute", top: "90%",left: "50%", transform: "translate(-50%, -50%)", width: "150px"}} >登录</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
const mapStateToProps = ({login}) => {
  return {
    login,
  }
}

export default connect(mapStateToProps)(Login)
